<template>
  <div class="levis">
    <!--顶部-->
    <img src="../common/images/top_logo.png" class="levis-top">
    <div class="prizes">
      <!--银福袋内容-->
      <div class="prize prize-sliver">
        <div class="prize-content">
          <h3 class="title">宝格丽香水</h3>
          <p>宝格丽晶纯女士香水40ml</p>
          <h3 class="title">FlowerPlus </h3>
          <p>悦花.简约混合包月</p>
        </div>
        <img class="button" src="../common/images/sliver_get.png" alt="" @click="draw(1)">
        <!--已核销-->
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-sliver">
        <div class="prize-content">
          <h3 class="title">冰希黎BOITOWN</h3>
          <p>蜡烛+香薰+香薰补充液+沙龙香水+</p>
          <p>身体乳+沐浴露+护手霜</p>
          <h3 class="title">POPMART</h3>
          <p>盲盒*1</p>
        </div>
        <img class="button" src="../common/images/sliver_get.png" alt="" @click="draw(2)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-sliver">
        <div class="prize-content">
          <h3 class="title">孩之宝&艺隆</h3>
          <p>巴啦啦小魔仙</p>
          <p>奥迪四驱车</p>
          <p>遥控玩具车</p>
        </div>
        <img class="button" src="../common/images/sliver_get.png" alt="" @click="draw(3)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-sliver">
        <div class="prize-content">
          <h3 class="title">Jansport</h3>
          <p>双肩包</p>
          <h3 class="title">POPMART</h3>
          <p>盲盒*2</p>
        </div>
        <img class="button" src="../common/images/sliver_get.png" alt="" @click="draw(4)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-sliver">
        <div class="prize-content">
          <h3 class="title">食品</h3>
          <p>皇上皇&nbsp;如一腊肠</p>
          <p>昆仑&nbsp;&nbsp;酱油肉 </p>
          <p>昆仑&nbsp;&nbsp;无骨腊鸡腿</p>
        </div>
        <img class="button" src="../common/images/sliver_get.png" alt="" @click="draw(5)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-sliver">
        <div class="prize-content">
          <h3 class="title">餐饮券</h3>
          <p>小猪佩奇</p>
          <p>超级棒棒糖/vc软糖储蓄罐/奇趣冒险蛋/牛奶</p>
          <p>曲奇饼干手提箱/超级食品礼包5件套</p>
        </div>
        <img class="button" src="../common/images/sliver_get.png" alt="" @click="draw(6)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-sliver">
        <div class="prize-content">
          <h3 class="title">食品</h3>
          <p>罗曼蒂克&nbsp;干红葡萄酒</p>
          <p>小红帽&nbsp;干红葡萄酒</p>
        </div>
        <img class="button" src="../common/images/sliver_get.png" alt="" @click="draw(7)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-sliver">
        <div class="prize-content">
          <h3 class="title">食品</h3>
          <p>新春零食10包套装</p>
          <p>综合坚果、肉干、小黑饼干、台湾牛轧糖、</p>
          <p>陈皮糖、迷你蛋糕卷、爆米花（焦糖味）、</p>
          <p>小林煎饼、芝麻糖、台湾蛋卷</p>
        </div>
        <img class="button" src="../common/images/sliver_get.png" alt="" @click="draw(8)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-sliver">
        <div class="prize-content">
          <h3 class="title">餐饮券</h3>
          <p>天泰（100元）*2 ；金包里（100元）*2 </p>
          <p>米芝莲（50元）*4 ；左庭右院（100元）*2</p>
          <p>石窑（50元）*4</p>
        </div>
        <img class="button" src="../common/images/sliver_get.png" alt="" @click="draw(9)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-sliver">
        <div class="prize-content">
          <h3 class="title">餐饮券</h3>
          <p>斯比特花园（100元）*2 ; 小自满（100元）*2</p>
          <p>贡茶（25元）*8 ; 天泰（100元）*2</p>
          <p>美珍香（100元）*2</p>
        </div>
        <img class="button" src="../common/images/sliver_get.png" alt="" @click="draw(10)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-sliver">
        <div class="prize-content">
          <h3 class="title">餐饮券</h3>
          <p>小满（50元）*4 ; 甜之坊（50元）*4</p>
          <p>先生的花（100元）*2 ; 青花椒（100元）*2</p>
          <p>西树泡芙（50元）*4</p>
        </div>
        <img class="button" src="../common/images/sliver_get.png" alt="" @click="draw(11)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-sliver">
        <div class="prize-content">
          <h3 class="title">餐饮券</h3>
          <p>天泰（100元）*2 ; 食之秘（100元）*2</p>
          <p>浩茶（25元）*8 ; 沼津港（100元）*2</p>
          <p>九丸拉面（100元）*2</p>
        </div>
        <img class="button" src="../common/images/sliver_get.png" alt="" @click="draw(12)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <!--金福袋内容-->
      <div class="prize prize-gold">
        <div class="prize-content">
          <h3 class="title">大圣</h3>
          <p>玩具——乐恩T系列</p>
          <p>智慧片——智慧家庭</p>
        </div>
        <img class="button" src="../common/images/gold_get.png" alt="" @click="draw(1)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-gold">
        <div class="prize-content">
          <h3 class="title">艺隆 </h3>
          <p>小猪佩奇玩具组合</p>
          <p>身体乳+沐浴露+护手霜</p>
        </div>
        <img class="button" src="../common/images/gold_get.png" alt="" @click="draw(2)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-gold">
        <div class="prize-content">
          <h3 class="title">POPMART</h3>
          <p>盲盒*12</p>
        </div>
        <img class="button" src="../common/images/gold_get.png" alt="" @click="draw(3)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-gold">
        <div class="prize-content">
          <h3 class="title">食品</h3>
          <p>年货套装</p>
          <p>( 酱油肉、无骨腊鸡腿、火腿块、皇上皇如一腊肠 )</p>
        </div>
        <img class="button" src="../common/images/gold_get.png" alt="" @click="draw(4)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-gold">
        <div class="prize-content">
          <h3 class="title">食品</h3>
          <p>美心 原味鸡蛋卷</p>
          <p>美心 礼盒装香脆甜心酥</p>
        </div>
        <img class="button" src="../common/images/gold_get.png" alt="" @click="draw(5)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-gold">
        <div class="prize-content">
          <h3 class="title">食品</h3>
          <p>白色恋人 白巧克力夹心饼干</p>
          <p>CALBEE  薯条三兄弟（咸味）</p>
          <p>CALBEE  薯条三兄弟（酱油味）</p>
        </div>
        <img class="button" src="../common/images/gold_get.png" alt="" @click="draw(6)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-gold">
        <div class="prize-content">
          <h3 class="title">食品</h3>
          <p>奇华&nbsp;&nbsp;贺年版鸡蛋卷</p>
          <p>奇华&nbsp;&nbsp;什锦糕饼礼盒</p>
          <p>奇华&nbsp;&nbsp;椰汁糖年糕</p>
        </div>
        <img class="button" src="../common/images/gold_get.png" alt="" @click="draw(7)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
      <div class="prize prize-gold">
        <div class="prize-content">
          <p>虎牌&nbsp;&nbsp;焖烧杯</p>
          <p>虎牌&nbsp;&nbsp;柠檬酸</p>
          <p>泰普尔&nbsp;&nbsp;睦风枕</p>
        </div>
        <img class="button" src="../common/images/gold_get.png" alt="" @click="draw(8)">
        <!--<img class="used" src="../common/images/distroy.png" alt="">-->
      </div>
    </div>
    <!--底部-->
    <img src="../common/images/bottom.png" class="levis-bottom">
    <pop-up :popShow="popShow" :popText="popText"></pop-up>
    <color @codeClose="codeClose" :colorBarShow="colorBarShow"></color>
  </div>
</template>

<script>
  import popUp from '../components/pop-up'
  import color from '../components/color'

  export default {
    components: {
      popUp,
      color
    },
    data() {
      return {
        colorBarShow: false, // 弹出二维码开关
        popShow: false, // 弹出确认框开关
        popText: '' // 弹出框文案
      }
    },
    mounted() {
      this.colorBarShow = false
    },
    methods: {
      draw(number) {
        alert(`领取${number}`)
      },
      // 二维码关闭
      codeClose() {
        this.colorBarShow = false
      }
    }
  }
</script>

<style lang="stylus">
  @import '../common/stylus/base.styl'
  .levis
    width 100vw
    min-height 100vh
    position relative
    background url('../common/images/index_bg.png') repeat 100% 100%
    overflow auto

  .levis-top
    width 100vw
    height auto
    display block
    position absolute
    top 0

  .levis-bottom
    width 100vw
    height auto
    display block
    position absolute
    bottom 0

  .prizes
    width vw(381)
    margin vw(350) auto vw(260)

  .prize
    width vw(381)
    height vw(230)
    position relative
    margin-bottom vw(50)
    margin-top vw(7)
    overflow hidden
    .prize-content
      width 100%
      height vw(128)
      display flex
      flex-direction column
      justify-content center
      align-items center
      .title
        margin-top vw(10)
        margin-bottom vw(2)
        font-size vw(17)
        font-weight bold
        text-align center
      p
        width 100%
        display block
        font-size vw(13)
        text-align center
        padding-top vw(6)
    .button
      width vw(119)
      height vw(35)
      position absolute
      bottom vw(60)
      left 50%
      margin-left vw(-60)
    .used
      position absolute
      left 0
      top 0
      width 100%
      height 100%
  .prize-sliver
    width vw(381)
    height vw(230)
    background url("../common/images/sliver_layer.png") no-repeat
    background-size 100%
    .prize-content
      color #b00e13
  .prize-gold
    width vw(381)
    height vw(230)
    background url("../common/images/gold_layer.png") no-repeat
    background-size 100%
    .prize-content
      color #e9de99
</style>
